<template>
    <view>
        <video :src="url" autoplay id="myVideo" style="width: 97%; height: 400rpx" />
        <button @click="doshot">截图</button>
        <image :src="shot" style="width: 100%; height: 400rpx" />
    </view>
</template>
 
<script>
export default {
    data() {
        return {
            url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4',
            shot: ''
        };
    },
    methods: {
        doshot() {
            this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
            this.videoContext.pause();
            this.$nextTick(() => {
                this.getCapture();
            });
        },
        getCapture() {
            let pages = getCurrentPages();
            let page = pages[pages.length - 1];
            let ws = page.$getAppWebview();
            var bitmap = new plus.nativeObj.Bitmap('test');
            // 将webview内容绘制到Bitmap对象中
            ws.draw(
                bitmap,
                () => {
                    console.log('截屏绘制图片成功');
                    // 将原生Bitmap转换成Base64字符串
                    this.shot = bitmap.toBase64Data();
                    this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
                    this.videoContext.play();
                },
                (e) => {
                    console.log('截屏绘制图片失败：', e);
                },
                {
                    check: true, // 设置为检测白屏
                    clip: { top: uni.getSystemInfoSync().statusBarHeight + 45, left: '0px', height: '266px', width: '100%' } // 设置截屏区域
                }
            );
        }
    }
};
</script>